<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }


    /* 进度条css样式 */
    #container {
        position: absolute;
        width: 400px;
        height: 16px;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -8px;
        border-radius: 8px;
        border: 1px solid #009999;
        overflow: hidden;
    }

    #per {
        height: 100%;
        width: 0px;
        background: #00ffff;
        color: #eff0f0;
        line-height: 15px;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        .gltf格式文件几乎可以包含所有的三维模型相关信息的数据，比如模型层级关系、PBR材质、纹理贴图、骨骼动画、变形动画...
    </div>

    <div id="canvas"></div>

    <div id="container">
        <!-- 进度条 -->
        <div id="per"> </div>
    </div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();

        // 2. 打光
        const light = new THREE.DirectionalLight(0xFFFFFF);
        light.position.set(6, 6, 6);
        scene.add(light)

        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
        hemiLight.position.set(0, 10, 0);
        scene.add(hemiLight);

        // 3. 添加glb文件
        const loader = new GLTFLoader();
        loader.load('../../three.js-r151/examples/models/gltf/Soldier.glb', function (gltf) {
            console.log("gltf", gltf);
            scene.add(gltf.scene);
            // gltf.scene.roate

            // 隐藏进度条
            document.getElementById("container").style.display = 'none';
        }, function (xhr) {
            const percent = xhr.loaded / xhr.total;
            console.log('加载进度' + percent);
            const percentDiv = document.getElementById("per");// 获取进度条元素
            percentDiv.style.width = percent * 400 + "px"; //进度条元素长度
            percentDiv.style.textIndent = percent * 400 + 5 + "px"; //缩进元素中的首行文本
            // Math.floor:小数加载进度取整
            percentDiv.innerHTML = Math.floor(percent * 100) + '%'; //进度百分比
        });


    </script>
</body>

</html>